<template>

  <div class="list">
    <!-- 头部 -->
    <div class="top">
      <img :src="playlist.coverImgUrl" class="bg" />
      <!-- 头部导航 -->
      <div class="nav">
        <div class="left" @click="router.back()"><svg t="1649930147277" class="icon" viewBox="0 0 1024 1024"
            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6090" width="16" height="16">
            <path
              d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"
              fill="" p-id="6091"></path>
          </svg>
          <span class="gedan">{{ $t('playinglist.name') }}</span>
        </div>
        <div class="right" @click="router.push('/search')">
          <svg t="1649930183978" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="6914" width="16" height="16">
            <path
              d="M912.072815 946.738335c-4.78498 0-9.56996-1.824555-13.220093-5.475711L650.662083 693.076078c-0.285502-0.285502-0.561795-0.579191-0.827855-0.883113l-6.979972-7.948019c-6.671956-7.594979-6.096858-19.11843 1.297552-26.012444 32.130791-29.958312 57.424874-65.413825 75.181283-105.379049 18.374486-41.35692 27.691689-85.472674 27.691689-131.122363 0-86.355787-33.628912-167.542854-94.691639-228.604558-61.062727-61.062727-142.249795-94.691639-228.604558-94.691639s-167.541831 33.628912-228.604558 94.691639c-61.062727 61.062727-94.691639 142.249795-94.691639 228.604558s33.628912 167.542854 94.691639 228.604558c61.062727 61.062727 142.249795 94.691639 228.604558 94.691639 26.15059 0 52.16508-3.130294 77.326133-9.301853 5.090948-1.353834 73.4038-19.189038 120.842229-14.809287 10.282181 0.948605 17.847483 10.05296 16.899902 20.335141s-10.047844 17.853623-20.335141 16.899902c-41.659819-3.845585-107.272165 13.571087-107.930151 13.747095-0.125867 0.033769-0.251733 0.065492-0.3776 0.097214-28.132734 6.91755-57.20998 10.425444-86.425372 10.425444-48.684816 0-95.922676-9.538237-140.402727-28.352745-42.953278-18.166755-81.523735-44.172035-114.644063-77.290317-33.119305-33.119305-59.123562-71.691809-77.29134-114.644063-18.813484-44.479027-28.352745-91.716888-28.352745-140.401704s9.53926-95.922676 28.352745-140.402727c18.167778-42.953278 44.172035-81.524758 77.29134-114.644063 33.119305-33.119305 71.690786-59.123562 114.644063-77.29134 44.480051-18.813484 91.717911-28.352745 140.402727-28.352745s95.922676 9.53926 140.401704 28.352745c42.953278 18.167778 81.524758 44.173059 114.644063 77.29134 33.118282 33.119305 59.123562 71.690786 77.29134 114.644063 18.813484 44.480051 28.351722 91.717911 28.351722 140.402727 0 50.912553-10.399861 100.136651-30.91101 146.305157-17.285688 38.906102-40.96704 73.973782-70.526263 104.47547l242.313791 242.310721c7.302313 7.30129 7.302313 19.138896 0.001023 26.440186C921.642774 944.912757 916.857794 946.738335 912.072815 946.738335z"
              p-id="6915"></path>
            <path
              d="M165.576059 421.887656c-0.696872 0-1.400906-0.038886-2.110057-0.118704-10.260691-1.152243-17.645892-10.404977-16.493649-20.666692 4.838192-43.080168 17.974373-83.934644 39.046295-121.429607 5.058203-9.002025 16.457834-12.19781 25.458835-7.139607 9.002025 5.058203 12.19781 16.45681 7.139607 25.458835-18.605753 33.108049-30.207999 69.202105-34.484396 107.282399C183.060269 414.827867 174.967964 421.887656 165.576059 421.887656z"
              p-id="6916"></path>
          </svg>
        </div>
      </div>
      <!-- 头部导航 -->
    </div>
    <!-- 头部 -->
    <div class="content">
      <div class="content-left">
        <img :src="playlist.coverImgUrl" />
      </div>
      <div class="content-right">
        <div class="title">{{ playlist.name }}</div>
        <div class="author"> </div>
        <div class="detail">{{ playlist.description }}</div>
      </div>
    </div>
    <!-- 四个图标 -->
    <div class="iconlist">
      <div class="iconitem">
        <svg t="1649936561444" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="8587" width="16" height="16">
          <path
            d="M850.879104 96.41591l-676.303067 0c-60.681034 0-110.049418 49.367361-110.049418 110.049418l0 446.200388c0 60.681034 49.367361 110.049418 110.049418 110.049418l90.307795 0L396.936381 931.129846c3.793396 4.838192 9.598612 7.66354 15.746636 7.66354s11.952216-2.825348 15.746636-7.66354l132.052548-168.414711 290.396903 0c60.681034 0 110.049418-49.367361 110.049418-110.049418L960.928522 206.465329C960.928522 145.784294 911.561162 96.41591 850.879104 96.41591zM920.91111 652.665717c0 38.614459-31.416524 70.030983-70.030983 70.030983L550.744419 722.6967c-6.147 0-11.952216 2.825348-15.745612 7.66354L412.683017 886.356107l-122.31579-155.995867c-3.792373-4.838192-9.597589-7.66354-15.745612-7.66354l-100.045577 0c-38.614459 0-70.030983-31.416524-70.030983-70.030983L104.545054 206.465329c0-38.614459 31.416524-70.030983 70.030983-70.030983l676.303067 0c38.614459 0 70.030983 31.416524 70.030983 70.030983L920.910087 652.665717z"
            p-id="8588"></path>
          <path
            d="M272.621051 344.526731c-44.132126 0-80.035848 35.903721-80.035848 80.035848 0 44.132126 35.903721 80.036871 80.035848 80.036871s80.035848-35.904745 80.035848-80.036871C352.655875 380.430452 316.752154 344.526731 272.621051 344.526731zM272.621051 464.582037c-22.065552 0-40.017412-17.951861-40.017412-40.018436 0-22.065552 17.952884-40.017412 40.017412-40.017412 22.065552 0 40.017412 17.951861 40.017412 40.017412C312.638463 446.629153 294.686602 464.582037 272.621051 464.582037z"
            p-id="8589"></path>
          <path
            d="M512.727571 344.526731c-44.132126 0-80.035848 35.903721-80.035848 80.035848 0 44.132126 35.903721 80.036871 80.035848 80.036871 44.132126 0 80.035848-35.904745 80.035848-80.036871C592.763418 380.430452 556.859697 344.526731 512.727571 344.526731zM512.727571 464.582037c-22.065552 0-40.017412-17.951861-40.017412-40.018436 0-22.065552 17.951861-40.017412 40.017412-40.017412 22.065552 0 40.017412 17.951861 40.017412 40.017412C552.746006 446.629153 534.793122 464.582037 512.727571 464.582037z"
            p-id="8590"></path>
          <path
            d="M752.836137 344.526731c-44.131103 0-80.035848 35.903721-80.035848 80.035848 0 44.132126 35.904745 80.036871 80.035848 80.036871s80.035848-35.904745 80.035848-80.036871C832.871985 380.430452 796.96724 344.526731 752.836137 344.526731zM752.836137 464.582037c-22.066575 0-40.017412-17.951861-40.017412-40.018436 0-22.065552 17.951861-40.017412 40.017412-40.017412s40.017412 17.951861 40.017412 40.017412C792.853549 446.629153 774.902712 464.582037 752.836137 464.582037z"
            p-id="8591"></path>
        </svg>
        <span>{{ playlist.commentCount }}</span>
      </div>
      <div class="iconitem">
        <svg t="1649937062604" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="12166" width="16" height="16">
          <path
            d="M353.989 418.5L665.81 251.518l23.983 44.786-311.822 166.981zM352.779 577.83l20.254-46.588L691.817 669.83l-20.254 46.589z"
            fill="#ffffff" p-id="12167"></path>
          <path
            d="M772.4 367.8c-78.3 0-142.1-63.7-142.1-142S694.1 83.6 772.4 83.6s142.1 63.7 142.1 142.1-63.7 142.1-142.1 142.1z m0-233.4c-50.3 0-91.3 40.9-91.3 91.3 0 50.3 40.9 91.2 91.3 91.2 50.3 0 91.3-40.9 91.3-91.2 0-50.3-40.9-91.3-91.3-91.3zM784.9 869.5c-78.3 0-142.1-63.7-142.1-142.1s63.7-142.1 142.1-142.1S927 649.1 927 727.4s-63.7 142.1-142.1 142.1z m0-233.3c-50.3 0-91.3 40.9-91.3 91.3s40.9 91.3 91.3 91.3c50.3 0 91.3-40.9 91.3-91.3s-40.9-91.3-91.3-91.3zM269.1 658.6c-78.3 0-142.1-63.7-142.1-142s63.7-142.1 142.1-142.1 142.1 63.7 142.1 142.1-63.8 142-142.1 142z m0-233.3c-50.3 0-91.3 40.9-91.3 91.3 0 50.3 41 91.2 91.3 91.2s91.3-40.9 91.3-91.2c-0.1-50.4-41-91.3-91.3-91.3z"
            fill="#ffffff" p-id="12168"></path>
        </svg>
        <span>{{ playlist.shareCount }}</span>
      </div>
      <div class="iconitem">
        <svg t="1649936687059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="10271" width="16" height="16">
          <path
            d="M808.192 246.528a320.16 320.16 0 0 0-592.352 0A238.592 238.592 0 0 0 32 479.936c0 132.352 107.648 240 240 240h91.488a32 32 0 1 0 0-64H272a176.192 176.192 0 0 1-176-176 175.04 175.04 0 0 1 148.48-173.888l19.04-2.976 6.24-18.24C305.248 181.408 402.592 111.936 512 111.936a256 256 0 0 1 242.208 172.896l6.272 18.24 19.04 2.976A175.04 175.04 0 0 1 928 479.936c0 97.024-78.976 176-176 176h-97.28a32 32 0 1 0 0 64h97.28c132.352 0 240-107.648 240-240a238.592 238.592 0 0 0-183.808-233.408z"
            p-id="10272"></path>
          <path
            d="M649.792 789.888L544 876.48V447.936a32 32 0 0 0-64 0V876.48l-106.752-87.424a31.968 31.968 0 1 0-40.544 49.504l159.04 130.24a32 32 0 0 0 40.576 0l158.048-129.44a32 32 0 1 0-40.576-49.472z"
            p-id="10273"></path>
        </svg>
        <span>{{ $t('search.download') }}</span>
      </div>
      <div class="iconitem">
        <svg t="1649936745585" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="11069" width="16" height="16">
          <path
            d="M742.4 114.688h-512A128 128 0 0 0 102.4 242.688v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128v-512a128 128 0 0 0-128-128z m76.8 640a76.8 76.8 0 0 1-76.8 76.8h-512a76.8 76.8 0 0 1-76.8-76.8v-512a76.8 76.8 0 0 1 76.8-76.8h512a76.8 76.8 0 0 1 76.8 76.8z"
            fill="" p-id="11070"></path>
          <path
            d="M674.304 376.832l-278.016 240.64-97.28-93.696a25.6 25.6 0 0 0-35.328 36.864l114.176 110.08a25.6 25.6 0 0 0 34.304 0l295.424-256a25.6 25.6 0 0 0-33.28-38.912z"
            fill="" p-id="11071"></path>
        </svg>
        <span>{{ $t('search.selectAll') }}</span>
      </div>
    </div>
    <!-- 四个图标 -->
  </div>

</template>

<script setup>
import { computed } from "vue";
import { useRouter, useRoute } from 'vue-router'
import { homeStore } from '@/store/home.js'
let router = useRouter()
const store = homeStore()
//获取歌单详情
let playlist = computed(() => store.songlistdetail)
</script>

<style lang="less" scoped>
.nav {
  position: fixed;
  top: 0;

}

.list {
  width: 7.5rem;

}

// 背景图
.bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 7.5rem;
  z-index: -1; //不会吧其他层遮盖
  filter: blur(1rem)
}

.nav {
  width: 7.5rem;
  display: flex;
  justify-content: space-between;
  margin: 0.3rem 0.1rem;
  height: 0.8rem;
  align-items: center;
  color: white;
  padding: 0 0.2rem;
  font-size: 0.33rem;


  .left {
    display: flex;

    .gedan {
      margin-left: 0.3rem;
    }
  }

  .right {
    margin-right: 0.1rem;

    .xuanze {
      margin-left: 0.2rem;
    }
  }

}

.iconlist {
  display: flex;
  justify-content: space-around;
  // background-color: rgba(197, 170, 135, .1);

  .iconitem {
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;


    svg {
      width: 0.5rem;
      height: 0.5rem;
    }
  }
}


// 中间内容
.content {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0.5rem;
  margin-top: 1rem;

  .content-left {
    img {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 0.2rem;
    }
  }

  .content-right {
    flex: 1;
    margin-left: 0.4rem;
    display: flex;
    flex-direction: column;

    .title {
      color: white;
      font-weight: 700;
    }

    .detail {
      margin-top: 0.5rem;
      color: #ccc;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
 